<template>
	<view>
		<view class="map-page">
			<u-button text="选择位置" type="primary" @click="getChooseLocation"></u-button>
		</view>
		<view class="map_container" >
			<map id="map" class="map" :scale="scale" :longitude="longitude" :latitude="latitude" style="height: 85vh;" enable-3D="true" :enable-overlooking="true" :show-location="true" :markers="markers"/>
		</view>
	</view>
	
</template>
 
<script>
	var amapFile = require('utils/amap-wx.130.js');
	export default {
		data() {
			return {
				//地图缩放级别
				scale: 16,
				longitude: undefined,
				latitude:undefined,
				myAmapFun:undefined,
				markers:[
					
				],
				_mapContext:{}
			}
		},
		onLoad() {
			this.getLocation();
			// this.setCovers(this.latitude, this.longitude)
			this.myAmapFun = new amapFile.AMapWX({key:'4ed422f198948fed99e6bf879244c3b1'});
			this._mapContext = uni.createMapContext("map", this);
			this._mapContext.on('markerClusterClick', (res) => {
				console.log(JSON.stringify(res))
			})
		},
		methods: {
			//默认获取当前位置
			getLocation(){
				let that = this
				uni.getLocation({
					type: 'type',
					success: function (res) {
						that.longitude = res.longitude
						that.latitude = res.latitude
						
					}
				});
			},
			//获取经纬度
			getChooseLocation() {
				let that=this
				console.log('测试执行')
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						that.myAmapFun.getRegeo({
						  location: res.longitude+','+res.latitude,
						  success: function(data){
							//成功回调
							console.log(data[0].id)
							console.log(data[0].name)
							console.log(data[0].longitude)
							console.log(data[0].latitude)
							console.log(data[0].desc)
							that.markers.push(
								{
									id: Math.floor(Math.random() * 100),
									longitude: res.longitude,
									latitude: res.latitude,
									title: data[0].name,
									width: '20', // 标记点图标宽度
								    height: '20' // 标记点图标高度
								}
							)
						  },
						  fail: function(info){
							//失败回调
							console.log(info)
						  }
						})
					},
					fail: (res) => {
						console.log(res)
					}
				})
			},
		}
	}
</script>
 
<style lang="scss">
	// .map_container{
	//   // position: absolute;
	//   top: 0;
	//   bottom: 0;
	//   left: 0;
	//   right: 0;
	// }
</style>